<template>
  <div>
    <div class="user-base-list overall-flex-wrap overall-flex">
      <div class="base-li">
        <i class="base-li-icon icon-chengshi overall-icon"></i>
        <span class="base-li-key">ID</span>
        <span class="base-li-value">{{ userInfo.id }}</span>
        <span class="base-li-value">复制</span>
      </div>
      <div class="base-li">
        <i class="base-li-icon icon-chengshi overall-icon"></i>
        <span class="base-li-span">某某公司 - 研发部 - 某某组</span>
      </div>
      <div class="base-li">
        <i class="base-li-icon icon-yonghu3 overall-icon"></i>
        <span class="base-li-span">资深前端工程师</span>
      </div>
      <div class="base-li">
        <i class="base-li-icon icon-ditu overall-icon"></i>
        <span class="base-li-span">中国 • 浙江省 • 杭州市</span>
      </div>
      <div class="base-li">
        <i class="base-li-icon icon-xiaoxi4 overall-icon"></i>
        <span class="base-li-span">JavaScript、HTML、CSS</span>
      </div>
    </div>

    <div class="user-options-list">
      <div class="user-options-list-li overall-flex">
        <i class="user-options-list-li-icon icon-heimingdan2 overall-icon"></i>
        <span class="user-options-list-li-span overall-flex-1">拉入黑名单</span>
        <i
          class="user-options-list-li-right-icon icon-jiantou3 overall-icon"
        ></i>
      </div>
    </div>
    <div class="user-options-list">
      <div class="user-options-list-li overall-flex">
        <i class="user-options-list-li-icon icon-dongjie1 overall-icon"></i>
        <span class="user-options-list-li-span overall-flex-1">限制登录</span>
        <i
          class="user-options-list-li-right-icon icon-jiantou3 overall-icon"
        ></i>
      </div>
    </div>
        <div class="user-options-list">
      <div class="user-options-list-li overall-flex">
        <i class="user-options-list-li-icon icon-dongjie1 overall-icon"></i>
        <span class="user-options-list-li-span overall-flex-1">锁定用户</span>
        <i
          class="user-options-list-li-right-icon icon-jiantou3 overall-icon"
        ></i>
      </div>
    </div>
    <div class="user-options-list">
      <div class="user-options-list-li overall-flex">
        <i class="user-options-list-li-icon icon-shanchu1 overall-icon"></i>
        <span class="user-options-list-li-span overall-flex-1">删除用户</span>
        <i
          class="user-options-list-li-right-icon icon-jiantou3 overall-icon"
        ></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["userInfo"],
};
</script>

<style scoped lang="scss">
$gap: 25px;
$padding: 10px 20px;
$radius: 8px;
$shadow: 0px 3px 7px 1px #e1d6d669;

.base {
  padding: $padding;
  border-radius: $radius;
  margin-bottom: $gap;
  box-shadow: $shadow;
  background: white;
  margin-bottom: 15px;
}
.user-options-list {
  @extend .base;
  padding-right: 20px;

  &-li {
    height: 35px;
    gap: 18px;
    align-items: center;

    &-icon {
    }
    &-span {
      font-size: 0.9rem;
    }
    &-right-icon {
      font-size: 0.4rem;
    }
  }
}

.user-base-list {
  @extend .base;
  flex-direction: column;
  margin: 15px 0px;
}
.base-li-key {
  font-size: 0.9rem;
}
.base-li-value {
  font-size: 0.9rem;
}
.base-li-span {
  font-size: 0.9rem;
}
.base-li-icon {
  font-size: 1.2rem;
  color: $colorGrayDark;
}
.base-li {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 18px;
}
</style>
